<template>
  <div class="containerbox">
    <el-row class="searchbox">
      <el-col :span="18">
        <div class="select-box-container" v-isRoleEqualTop>
          <div
            class="select-box"
            :class="{ active: queryInfo.distributeType === 1 }"
            @click="changeDistributeType(1)"
          >
            全部
          </div>
          <div
            class="select-box"
            :class="{ active: queryInfo.distributeType === 2 }"
            @click="changeDistributeType(2)"
          >
            已分发
          </div>
          <div
            class="select-box"
            :class="{ active: queryInfo.distributeType === 3 }"
            @click="changeDistributeType(3)"
          >
            未分发
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="text-align: center">
        <el-input
          placeholder="请输入关键字查询"
          v-model="queryInfo.searchValue"
          class="input-with-select"
          style="width: 100%"
        >
          <el-button slot="append" icon="el-icon-search" @click="search"
            >查询</el-button
          >
        </el-input>
      </el-col>
    </el-row>
    <el-row class="draftTitle">
      <el-card>
        <div class="listtitle">
          <i></i>
          <div class="txt">当前待办</div>
        </div>
      </el-card>
    </el-row>
    <!-- 列表区 -->
    <div class="draftlist">
      <el-row class="cardlist" v-for="(item, index) in waitList" :key="index">
        <el-card>
          <el-row
            type="flex"
            align="middle"
            @click.native="openOrder(item.orderId, item.processId)"
          >
            <el-col :span="22">
              <el-row class="itemtitle" type="flex" align="middle">
                <el-tag
                  type="success"
                  effect="plain"
                  size="mini"
                  style="margin-right: 10px"
                  v-if="item.readFlag == 0"
                  >未读</el-tag
                >
                {{ item.artTitle }}
              </el-row>
              <el-row class="itemcontent">
                <div class="txtcontent">{{ item.artContent }}</div>
              </el-row>
              <el-row class="itemkey">
                <el-col
                  :span="4"
                  v-if="
                    item.lastOperatorDeptName != null &&
                    item.lastOperatorDeptName != ''
                  "
                  class="dept"
                  >{{ item.lastOperatorDeptName }}</el-col
                >
                <el-col :span="6" class="publishtime"
                  >发布时间：{{ item.artPublishTime }}</el-col
                >
                <el-col :span="4" class="sitename">{{
                  item.artSourceName
                }}</el-col>
                <el-col
                  :span="3"
                  class="yuqleibie"
                  v-if="
                    item.opinionTypeName != '' && item.opinionTypeName != null
                  "
                  >{{ item.opinionTypeName }}</el-col
                >
                <el-col
                  :span="2"
                  v-if="item.timeStatus != null && item.timeStatus == 1"
                  class="chaoqi"
                  >即将超期</el-col
                >
                <el-col
                  :span="2"
                  v-if="item.timeStatus != null && item.timeStatus == 2"
                  class="chaoqi"
                  >已超期</el-col
                >
                <el-col :span="2" v-if="item.leaderFlag == 1" class="sitename"
                  >领导批示</el-col
                >
              </el-row>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <el-button type="primary" size="medium">查看</el-button>
              <el-button
                size="medium"
                style="margin: 5px 0 0"
                @click.stop="revoke(item)"
                v-if="
                  !(item.opinionTypeName != '' && item.opinionTypeName != null)
                "
                v-isRoleEqualTop
                >撤销</el-button
              >
            </el-col>
          </el-row>
        </el-card>
      </el-row>
      <el-row type="flex" align="middle" class="nodata" v-if="total == 0">
        <el-col> 暂无数据 </el-col>
      </el-row>
    </div>
    <!-- 分页 -->
    <el-row type="flex" align="middle" style="height: 58px" v-if="total > 0">
      <el-col :span="24">
        <BizPagination
          :total="total"
          :page.sync="queryInfo.pageNum"
          :limit.sync="queryInfo.pageSize"
          @pagination="getOpinionList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getopinionlist, opinionapprove } from "@/api/opinion/data";
import { parseTime } from "@/utils/ruoyi";
export default {
  data() {
    return {
      highlight: 1,
      searchKey: "",
      queryInfo: {
        distributeType: 1,
        searchValue: "",
        beginTime: "",
        endTime: "",
        searchType: 1,
        queryType: 1,
        pageNum: 1,
        pageSize: 5,
      },
      total: -1,
      waitList: [],
    };
  },
  watch: {
    "queryInfo.searchValue"() {
      if (this.queryInfo.searchValue == "") {
        this.getOpinionList();
      }
    },
  },
  created() {
    this.getOpinionList();
  },
  methods: {
    getOpinionList() {
      getopinionlist(this.queryInfo)
        .then((res) => {
          if (res.code == 200) {
            this.total = res.total;
            this.waitList = res.rows;
          }
        })
        .catch(() => {
          this.$message.error("获取待办列表失败");
        });
    },
    openOrder(id, processId) {
      this.$router.push(
        "/waitDetail/" +
          id +
          "/" +
          this.queryInfo.searchType +
          "/" +
          this.highlight +
          "/" +
          processId
      );
    },
    search() {
      this.queryInfo.pageNum = 1;
      this.getOpinionList();
    },

    changeDistributeType(t) {
      this.queryInfo.distributeType = t;
      this.search();
    },

    revoke(item) {
      this.$alert("确认撤销吗?", "确认", {
        confirmButtonText: "撤销",
        cancelButtonText: "取消",
      })
        .then((res) => {
          opinionapprove({
            processId: item.processId,
            operatorType: 7,
            operatorContent: "",
          })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.getOpinionList();
              }
            })
            .catch(() => {
              this.$message.error("操作失败");
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.containerbox {
  min-height: 85vh;
  background-color: rgb(240, 242, 245);
  padding: 15px;
}
.searchbox {
  margin: auto;
  margin-bottom: 20px;

  .select-box-container {
    display: flex;
    border-radius: 4px;
    overflow: hidden;

    .select-box {
      width: 90px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999999;
      border: 1px solid rgba(153, 153, 153, 0.2);
      cursor: pointer;

      &.active {
        background: white;
        color: #333;
        font-weight: 600;
      }
    }
  }
}
.listtitle {
  margin-top: 15px;
  .txt {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
  }
  i {
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #2d8cf0;
    vertical-align: middle;
    margin-right: 15px;
    margin-left: 3px;
  }
}
.el-card.is-always-shadow {
  box-shadow: none !important;
}
.draftTitle .el-card {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #ededf6 !important;
}
.draftlist {
  .cardlist {
    position: relative;
    border: 1px solid #eef0f9;
    &:hover {
      border: 1px solid #4383e4;
      cursor: pointer;
    }
    margin-bottom: 10px;
    .itemtitle {
      margin-bottom: 5px;
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
    }
    .itemcontent {
      font-size: 14px;
      color: #666666;
      line-height: 26px;
    }
    .itemkey {
      position: relative;
      margin-top: 15px;
      .dept {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #415f9b;
        line-height: 20px;
      }
      .publishtime {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(105, 128, 171, 1);
        line-height: 20px;
      }
      .sitename {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(67, 131, 228, 1);
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }
      .chaoqi {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #f56c6c;
        line-height: 20px;
      }
      .yuqleibie {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1da362;
        line-height: 20px;
      }
      .chakan {
        position: absolute;
        right: 20px;
        bottom: 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.nodata {
  text-align: center;
  height: 50vh;
  background-color: #fff;
  color: #515a6e;
  font-size: 18px;
  letter-spacing: 10px;
}
.searchbox {
  .el-input__inner {
    height: 40px !important;
    line-height: 40px !important;
  }
  .el-input-group__append {
    background-color: #4383e4 !important;
    color: #fff !important;
    font-size: 16px !important;
    border: 0 !important;
  }
}
.draftTitle {
  .el-card__body {
    padding: 10px 20px 20px 20px !important;
  }
}
.draftlist {
  .el-card {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #ededf6 !important;
  }
  .el-card__body {
    padding: 15px 20px 15px 20px !important;
  }
}
.txtcontent {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
